<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        label.error {
            color: red;
            position: absolute;
            right: 220px;
        }

        .line2_1 {
            display: flex;
            flex-wrap: nowrap;
        }
    </style>
    <link rel="stylesheet" href="./src/css/register.css">
    <script src="./src/js/jquery.min.js"></script>
    <script src="./src/js/register.js"></script>
    <script src="./src/js/jquery-validate/jquery.validate.js"></script>
    <script src="./src/js/jquery-validate/additional-methods.js"></script>
    <script src="./src/js/jquery-validate/localization/messages_zh.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/layer/3.1.1/layer.js"></script>
</head>

<body>
    <div class="top bx">
        <img src="./src/image/registerImg/logo-icon.png">
        <img src="./src/image/registerImg/slogan-0224.png">
    </div>
    <form action="#">
        <div class="bx main">
            <h3>注册万表会员</h3>
            <div class="line2_1">
                <input type="text" placeholder="请输入账号" name="name">
            </div>
            <div class="line2_1">
                <input type="text" placeholder="请输入密码" name="pwd" id="upwd">
            </div>
            <div class="line2_1">
                <input type="text" placeholder="请再次输入密码" name="pwd2">
            </div>
            <div class="line2_2">
                请输入性别:
                <input type="radio" value="男" name="sex">男
                <input type="radio" value="女" name="sex" checked>女
            </div>
            <div class="line2_1">
                <input type="text" placeholder="请输入居住地址" name="address">
            </div>
            <div class="line2_1">
                <input type="text" placeholder="请填写邮箱" name="email">
            </div>
            <div class="line2_1">
                <input type="text" placeholder="请填写昵称" name="nickname">
            </div>
            <div class="line2_1">
                <input type="text" placeholder="请输入手机号码" name="phone">
            </div>
            <div class="line2_4">
                <button id="reg">立即注册</button>
            </div>
            <p>点击“立即注册”，即表示您同意并愿意遵守<span>万表网用户协议</span></p>
        </div>
    </form>
</body>

</html>
<script>
    $(function () {
        $.validator.addMethod('checkName', function (value, element, param) {
            return /^[a-z]\w+/ig.test(value)
        })
        $('form').validate({
            rules: {
                name: {
                    required: true,
                    checkName: true,
                    rangelength: [6, 12],
                    remote: "/api/checkName"
                },
                pwd: {
                    required: true,
                    rangelength: [6, 12],
                },
                pwd2: {
                    equalTo: "#upwd",
                },
                nickname: {
                    required: true,
                },
                phone: {
                    rangelength: [11, 11],
                    digits: true,
                },
                email: {
                    email: true,
                }
            },
            messages: {
                name: {
                    required: '用户名不能为空~',
                    checkName: '用户名不合法',
                    rangelength: '用户名的长度必须是{0}-{1}',
                    remote: '该用户名已经注册!'
                },
                pwd: {
                    required: '密码不能为空~',
                    rangelength: '密码长度必须是{0}-{1}',
                },
                pwd2: {
                    equalTo: "两次密码不一致"
                },
                nickname: {
                    required: '昵称必填',
                },
                phone: {
                    rangelength: '手机号必须11位',
                    digits: '必须输入数字',
                },
                email: {
                    email: '邮箱名不合法',
                }
            },
            submitHandler() {
                $('#reg').prop('disabled', true)
                var index = layer.load(1, {
                    shade: [0.1, '#fff']
                });
                $.ajax({
                    url: '/api/reg',
                    type: 'post',
                    data: $('form').serialize(),
                }).then(function (res) {
                    $('#reg').prop('disabled', true)
                    layer.close(index);
                    if (res && res.code == 200) {
                        layer.confirm('注册成功,是否立即去登陆', {
                            btn: ['确定', '取消']
                        }, function (index) {
                            setTimeout(function () {
                                location = './login.html'
                            }, 500)
                            layer.close(index);
                        }, function () {

                        })
                    }
                })
                return false
            }
        })
    })
</script>